<!DOCTYPE html>
<html>
<head>
    <title>首页</title>
    {% include 'admin/common/header.html' %}
    <link rel="stylesheet" href="{{ url_for('static', filename='/admin/admin/css/other/console2.css') }}"/>
</head>
<body class="pear-container">
<div class="layui-row layui-col-space10">
    <div class="layui-col-md8">
        <div class="layui-row layui-col-space10">
            <div class="layui-col-md6">
                <div class="layui-card">
                    <div class="layui-card-header">
                        情绪情况
                    </div>
                    <div class="layui-card-body">
                        <div class="layui-row layui-col-space10">
                            <div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
                                <div class="pear-card2">
                                    <div class="title">表现最多情绪</div>
                                    <div class="count pear-text">开心</div>
                                </div>
                            </div>
                            <div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
                                <div class="pear-card2">
                                    <div class="title">表现最少情绪</div>
                                    <div class="count pear-text">悲伤</div>
                                </div>
                            </div>
                            <div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
                                <div class="pear-card2">
                                    <div class="title">预测准确性得分</div>
                                    <div class="count pear-text">100</div>
                                </div>
                            </div>
                            <div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
                                <div class="pear-card2">
                                    <div class="title">预测准确率</div>
                                    <div class="count pear-text">78%</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md6">
                <div class="layui-card">
                    <div class="layui-card-header">
                        检测情况
                    </div>
                    <div class="layui-card-body">
                        <div class="layui-row layui-col-space10">
                            <div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
                                <div class="pear-card2">
                                    <div class="title">准确率最高表情</div>
                                    <div class="count pear-text">愤怒</div>
                                </div>
                            </div>
                            <div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
                                <div class="pear-card2">
                                    <div class="title">准确率最低表情</div>
                                    <div class="count pear-text">悲伤</div>
                                </div>
                            </div>
                            <div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
                                <div class="pear-card2">
                                    <div class="title">最高表情变化</div>
                                    <div class="count pear-text">4次</div>
                                </div>
                            </div>
                            <div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
                                <div class="pear-card2">
                                    <div class="title">平均采集时间</div>
                                    <div class="count pear-text">10秒</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-header">识别结果</div>
                    <div class="layui-card-body">
                        <div class="layui-tab custom-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                            <div id="echarts-records" style="background-color:#ffffff;min-height:1000px;"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-col-md4">
       <!-- 
            <div class="layui-card">
            <div class="layui-card-header">磁盘信息</div>
            <div class="layui-card-body">
                <ul class="pear-card-status">
                    {% for i in disk_partitions_list %}
                        <li>
                            <p>{{ i.device }}</p>
                            <p>{{ i.fstype }}</p>
                            磁盘大小&nbsp;<span>{{ i.total }}M</span>&nbsp;&nbsp;
                            空闲大小&nbsp;<span>{{ i.free }}M</span>&nbsp;&nbsp;
                            <br/>
                            <br/>
                            已经使用&nbsp;<span>{{ i.used }}M</span>&nbsp;&nbsp;
                            使用概率&nbsp;<span>{{ i.percent }}%</span>
                            <br/>
                            <a href="javascript:;" data-id="1" class="pear-btn pear-btn-xs pear-btn-primary pear-reply">详情</a>
                        </li>
                    {% endfor %}
                </ul>
            </div>
        </div> 
        -->
        <div class="layui-card">
            <div class="layui-card-header">考核信息</div>
            <div class="layui-card-body">
                <table class="layui-table" lay-skin="line",style="min-height:500px">
                    <thead>
                    <tr>
                        <th>情绪采集次数</th>
                        <th>100</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <th>最高准确率</th>
                        <th>93%</th>
                    </tr>    
                    <tr>
                        <th>最低准确率</th>
                        <th>74%</th>
                    </tr>
                    <tr>
                        <td>超过平均准确率次数</td>
                        <td>53</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <!--<div class="layui-card">
            <div class="layui-card-header">监考人员情况</div>
            <div class="layui-card-body">
                <table class="layui-table" lay-skin="line",style="min-height:500px">
                    <thead>
                    <tr>
                        <th>监考人数</th>
                        <th>100</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <th>监考人员出勤率</th>
                    </tr>    
                    <tr>
                        <td>作弊场次</td>
                        <td>{{ hostname }}</td>
                    </tr>
                    <tr>
                        <td>监考时间</td>
                        <td>{{ system_version }}</td>
                    </tr>
                    <tr>
                        <td>监考科目</td>
                        <td>{{ boot_time }}</td>
                    </tr>

                    </tbody>
                </table>
            </div>
        </div>
            <div class="layui-card">
                <div class="layui-card-header">考试场次信息</div>
                <div class="layui-card-body">
                    <div class="layui-tab custom-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                        <div id="echarts-testrecords" style="background-color:#ffffff;min-height:800px;"></div>
                    </div>
                </div>
            </div>
        </div>-->
    </div>
</div>
{% include 'admin/common/footer.html' %}
<script>
    layui.use(['layer', 'echarts', 'element', 'count'], function () {
        var chartDom = document.getElementById('echarts-records');
        var myChart = echarts.init(chartDom);
        var option;
        
        option = {
            legend: {},
            tooltip: {
              trigger: 'axis',
              showContent: false
            },
            dataset: {
              source: [
                ['product', '2012', '2013', '2014', '2015', '2016', '2017'],
                ['愤怒', 10, 23.1, 33.7, 44.1, 66.4, 88.1],
                ['厌恶', 51.1, 61.4, 75.1, 83.3, 73.8, 68.7],
                ['恐惧', 60.1, 62.2, 69.5, 66.4, 65.2, 62.5],
                ['高兴', 75.2, 77.1, 71.2, 78, 73.9, 79.1],
                ['平静', 80.1, 82.2, 88.5, 86.4, 85.2, 82.5],
                ['悲伤', 90.1, 92.2, 99.5, 96.4, 95.2, 92.5]
              ]
            },
            xAxis: { type: 'category' },
            yAxis: { gridIndex: 0 },
            grid: { top: '55%' },
            series: [
              {
                type: 'line',
                smooth: true,
                seriesLayoutBy: 'row',
                emphasis: { focus: 'series' }
              },
              {
                type: 'line',
                smooth: true,
                seriesLayoutBy: 'row',
                emphasis: { focus: 'series' }
              },
              {
                type: 'line',
                smooth: true,
                seriesLayoutBy: 'row',
                emphasis: { focus: 'series' }
              },
              {
                type: 'line',
                smooth: true,
                seriesLayoutBy: 'row',
                emphasis: { focus: 'series' }
              },
              {
                type: 'line',
                smooth: true,
                seriesLayoutBy: 'row',
                emphasis: { focus: 'series' }
              },
              {
                type: 'line',
                smooth: true,
                seriesLayoutBy: 'row',
                emphasis: { focus: 'series' }
              },
              {
                type: 'pie',
                id: 'pie',
                radius: '30%',
                center: ['50%', '25%'],
                emphasis: {
                  focus: 'self'
                },
                label: {
                  formatter: '{b}: {@2012} ({d}%)'
                },
                encode: {
                  itemName: 'product',
                  value: '2012',
                  tooltip: '2012'
                }
              }
            ]
          };
          myChart.on('updateAxisPointer', function (event) {
            const xAxisInfo = event.axesInfo[0];
            if (xAxisInfo) {
              const dimension = xAxisInfo.value + 1;
              myChart.setOption({
                series: {
                  id: 'pie',
                  label: {
                    formatter: '{b}: {@[' + dimension + ']} ({d}%)'
                  },
                  encode: {
                    value: dimension,
                    tooltip: dimension
                  }
                }
              });
            }
          });
          myChart.setOption(option);
        });

</script>
<script>
    layui.use(['layer', 'echarts', 'element', 'count'], function () {
        var chartDom = document.getElementById('echarts-testrecords');
        var myChart = echarts.init(chartDom);
        var option;
        
        option = {
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'cross',
                crossStyle: {
                  color: '#999'
                }
              }
            },
            toolbox: {
              feature: {
                dataView: { show: true, readOnly: false },
                magicType: { show: true, type: ['line', 'bar'] },
                restore: { show: true },
                saveAsImage: { show: true }
              }
            },
            legend: {
              data: ['考试人数', '监考人数', '后勤人员']
            },
            xAxis: [
              {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                axisPointer: {
                  type: 'shadow'
                }
              }
            ],
            yAxis: [
              {
                type: 'value',
                name: 'Precipitation',
                min: 0,
                max: 250,
                interval: 50,
                axisLabel: {
                  formatter: '{value} 人次'
                }
              },
              {
                type: 'value',
                name: 'Temperature',
                min: 0,
                max: 25,
                interval: 5,
                axisLabel: {
                  formatter: '{value} 人次'
                }
              }
            ],
            series: [
              {
                name: '考试人数',
                type: 'bar',
                tooltip: {
                  valueFormatter: function (value) {
                    return value + ' 人次';
                  }
                },
                data: [
                  2, 4, 7, 23, 25, 76, 135, 162, 32, 20, 6, 3
                ]
              },
              {
                name: '监考人数',
                type: 'bar',
                tooltip: {
                  valueFormatter: function (value) {
                    return value + ' 人次';
                  }
                },
                data: [
                  2, 5, 9, 26, 28, 70, 175, 182, 48, 18, 6, 2
                ]
              },
              {
                name: '平均得分',
                type: 'line',
                yAxisIndex: 1,
                tooltip: {
                  valueFormatter: function (value) {
                    return value + ' 人次';
                  }
                },
                data: [2, 2, 3, 4, 6, 10, 20, 23, 23, 16, 12, 6]
              }
            ]
          };
          myChart.setOption(option);
        });
</script>
</body>
</html>